<template>
    <div>
        <!-- 日志管理页面 -->
        <Card>
            <p slot="title" class="card-title">
                <Icon type="home"></Icon>
                <span>日志管理</span>
            </p>
            <div>
                <template>
                    <Form ref="formInline" :model="search" inline>
                        <span class="span">操作用户:</span>
                        <FormItem prop="username">
                            <Input type="text" v-model="search.username" placeholder="Username">
                            <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                            </Input>
                        </FormItem>
                        操作行为:
                        <FormItem prop="actionName">
                            <Input type="text" v-model="search.actionName" placeholder="actionName">
                            <!--<Icon type="ios-lock-outline" slot="prepend"></Icon>-->
                            </Input>
                        </FormItem>
                        操作人ip:
                        <FormItem prop="ip">
                            <Input type="text" v-model="search.ip" placeholder="ip">
                            <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                            </Input>
                        </FormItem>
                        请求路径:
                        <FormItem prop="uri">
                            <Input type="text" v-model="search.uri" placeholder="uri">
                            <!--<Icon type="ios-lock-outline" slot="prepend"></Icon>-->
                            </Input>
                        </FormItem>
                        时间段:
                        <FormItem prop="startTime">
                            <DatePicker  type="datetime" placeholder="Start date" format="yyyy-MM-dd HH:mm:ss"
                                        v-model="search.startTime"></DatePicker>
                        </FormItem>
                        <FormItem prop="endTime">
                            <DatePicker  type="datetime" placeholder="End date" format="yyyy-MM-dd HH:mm:ss"
                                        v-model="search.endTime"></DatePicker>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" icon="ios-search" @click="handleSubmit()">Search</Button>
                        </FormItem>
                    </Form>
                    <Table ref="table" class="margin-bottom-10"
                           :columns="columns" :loading="setting.loading" :border="setting.showBorder"
                           :data="data.content"></Table>
                    <Page :total="data.totalElements" class="tr" @on-change="pageChange" :current.sync="data.number+1"
                          :page-size="data.size"
                          @on-page-size-change="pageSizeChange" show-elevator show-sizer></Page>
                </template>
            </div>
        </Card>
    </div>
</template>

<script>
    import {post} from '../../../libs/request'

    export default {
        name: "index",
        data() {
            return {
                // 搜索
                search: {
                    ip: '',
                    uri: '',
                    username: '',
                    actionName: '',
                    startTime: '',
                    endTime: '',
                    page: 1,
                    pageSize: 10,
                },
                // 进度条属性
                setting: {
                    loading: true,
                    showBorder: true
                },
                // 表格数据
                data: {},
                columns: [
                    {title: 'ID', key: 'id', sortable: true},
                    {title: '操作用户', key: 'username', sortable: true},
                    {title: '操作人ip', key: 'ip', sortable: true},
                    {title: '操作行为', key: 'actionName', sortable: true},
                    {title: '请求路径', key: 'uri', sortable: true},
                    {title: '请求方法类型', key: 'httpMethod', sortable: true},
                    {title: '请求类及方法', key: 'classMethod', sortable: true},
                    {title: '请求参数', key: 'params', sortable: true},
                    {title: '操作时间', key: 'createDate', sortable: true},
                ],
            }
        },
        methods: {
            pageChange(p) {
                this.search.page = p;
                this.getData();
            },
            pageSizeChange(p) {
                this.search.pageSize = p;
                this.getData();
            },

            /**
             * 获取权限菜单
             * @returns {Promise<void>}
             */
            async getData() {
                this.setting.loading = true;
                try {
                    let res = await post('/sysLog/list', this.search);
                    this.data = res.data;
                } catch (error) {
                    console.log(error)
                }
                this.setting.loading = false;
            },
            async handleSubmit() {
                this.setting.loading = true;
                try {
                    let res = await post('/sysLog/list', this.search);
                    this.data = res.data;
                } catch (error) {
                    console.log(error)
                }
                this.setting.loading = false;
            }
        },
        created() {
            this.getData();
        }

    }
</script>

<style scoped>
    .span {
        line-height: 33px;;
    }
</style>
